<template>
    <div class="content-info">
        <!-- 文件夹 -->
        <div v-if="componentType == 1 || componentType == 3" class="info-block" style="margin-top: 0">
            <a-textarea v-model:value="folderName" placeholder="请输入名称" :rows="2" />
            <a-select
             v-if="componentType == 3"
             class="tag-select" 
             placeholder="点击添加标签"
             v-model:value="selectedItems" 
             mode="multiple" 
             :open="false">
            </a-select>
            <a-input v-model:value="folderDesc" placeholder="请输入描述文字" />
        </div>
        <!-- 人物信息 -->
        <div v-else-if="componentType == 2" class="info-block" style="margin-top: 0">
            <div class="info-block-text">
                <span class="name">人物名称</span>
                <span class="value">罗凤鸣</span>
            </div>
            <div class="info-block-text">
                <span class="name">人物职位</span>
                <span class="value">院长</span>
            </div>
        </div>
        <!-- 关联人物 -->
        <div class="info-block">
            <div class="info-block-title">关联人物</div>
            <div class="img-list">
                <div v-for="item in 10" :key="item" class="img-item">
                    <img src="https://image.nbd.com.cn/uploads/articles/thumbnails/1572465/CLVJKEFBNV1715061543030.large_b.jpg">
                </div>
            </div>
        </div>
        <!-- 文件夹 -->
        <div class="info-block">
            <div class="info-block-title">文件夹</div>
            <div class="folder-list">
                <div class="foler-item">
                    <img src="@/assets/img/meadiaIndex/tree-folder.png">
                    <span>视觉中国</span>
                </div>
            </div>
        </div>
        <!-- 基本信息 -->
        <div class="info-block" :style="{marginTop: componentType == 0 ? '0px' : '32px'}">
            <div class="info-block-title">基本信息</div>
            <div class="info-block-text">
                <span class="name">文件数</span>
                <span class="value">48个</span>
            </div>
            <div class="info-block-text">
                <span class="name">文件大小</span>
                <span class="value">512MB</span>
            </div>
            <div class="info-block-text">
                <span class="name">添加时间</span>
                <span class="value">2024-02-08 11:20</span>
            </div>
        </div>
        <a-button style="padding: 6px 74px!important;background-color: transparent;height: initial;">下载文件夹</a-button>

        <!-- 任务信息弹框 -->
        <div class="modal-box person-wrapper" v-show="tagModal">
            <div class="modal-title">
                <span>人物详情</span>
                <img class="modal-close" src="@/assets/img/meadiaIndex/modal-close.png">
            </div>
            <div class="modal-content">
                <div class="person-box">
                    <div class="person-img"><img src="https://image.nbd.com.cn/uploads/articles/thumbnails/1561135/97543748.large_b.jpg"></div>
                    <div class="person-text">
                        <div class="person-block" style="margin: 0;">
                            <p class="person-label">人物名称</p>
                            <p class="person-bold">敬静</p>
                        </div>
                        <div class="person-block">
                            <p class="person-label">人物职位</p>
                            <p class="person-bold">党委书记</p>
                        </div>
                        <div class="person-block">
                            <p class="person-label">备注</p>
                            <p>党委书记党委书记党委书记党委书记党委书记党委书记党委书记</p>
                            <p>记党委书记党委书记党委书记党委书记党委书记党委</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标签弹框 -->
        <div class="modal-box" v-show="tagModal">
            <div class="modal-title">
                <span>标签管理</span>
                <img class="modal-close" src="@/assets/img/meadiaIndex/modal-close.png">
            </div>
            <div class="modal-content">
                <a-input v-model:value="folderDesc" placeholder="新增或搜索标签" />
                <ul class="modal-tag">
                    <li class="modal-tag-item">
                        <span>新增“马”标签</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>马鹿君</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>马上到</span>
                    </li>
                </ul>
                <p>建议标签</p>
                <ul class="modal-tag">
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item active">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item active">
                        <i></i>
                        <span>自然风景</span>
                    </li>
                    <li class="modal-tag-item active">
                        <i></i>
                        <span>奇特风景</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>风景</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                    <li class="modal-tag-item">
                        <i></i>
                        <span>河流</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

/* 0: 回收站/未标签/未分类
   1: 文件夹
   2: 人物信息
   3: 全部-选择单个媒资
*/
const componentType = ref<number>(3);

const folderName = ref('简约风设计宣传绿叶圣诞节大图城市风格照');
const folderDesc = ref('');
const selectedItems = ref<string[]>(['河流', '奇特', '奇特', '奇特', '自然风景', '人说成都好风光呀']);
const tagModal = ref(false);
</script>

<style lang="scss" src="./index.scss" scoped>
</style>